<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>员工信息</title>
		<link rel="stylesheet" href="../public/modules/element-ui/lib/theme-chalk/index.css" />
		<link rel="stylesheet" href="../static/employeeinfo.css" />
		<script type="text/javascript" src="../public/seajs.js"></script>
		<script type="text/javascript" src="../public/modules/vue/vue.js"></script>
		<script type="text/javascript" src="../public/modules/element-ui/lib/index.js"></script>
	</head>

	<body>
		<div id="em">
			<el-container>
				<el-header>Header</el-header>
				<el-container direction="horizontal">
					<object type="text/x-scriptlet" data="../main.html"></object>
					<el-container direction="vertical" style="height: 100%;">
						<el-main>
							<el-input class="searchInput" v-model="searchKeyword" placeholder="输入检索的姓名" prefix-icon="el-icon-search"></el-input>
							<el-button type="primary" @click="searchEmp">查询</el-button>
							<el-breadcrumb separator-class="el-icon-arrow-right">
								<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
								<el-breadcrumb-item>用户管理</el-breadcrumb-item>
								<el-breadcrumb-item>用户维护</el-breadcrumb-item>
							</el-breadcrumb>
							<hr />
							<el-table :data="tableData" @row-click="selectRow" style="width: 100%;height: 400px;" height="400px">
								<el-table-column prop="userId" label="序号" width="140">
								</el-table-column>
								<el-table-column prop="userName" label="姓名" width="140">
								</el-table-column>
								<el-table-column prop="sex" label="性别" width="140">
								</el-table-column>
								<el-table-column prop="phone" label="电话" width="140">
								</el-table-column>
								<el-table-column prop="jobtime" value-format="yyyy-MM-dd" label="入职时间" width="140">
								</el-table-column>
								<el-table-column prop="departmentName" label="部门" width="140">
								</el-table-column>
								<el-table-column prop="address" label="地址" width="140">
								</el-table-column>
							</el-table>
						</el-main>
						<el-container>
							<el-main style="height: 500px;">
								<el-tabs type="border-card">
									<el-tab-pane>
										<span slot="label"><i class="el-icon-date"></i> 基本信息</span>
										<span class="el-span">基本信息</span>
										<el-row>
											<el-col :span="2">
												序号
											</el-col>
											<el-col :span="6">
												<el-input type="text" :value="emp.userId"  :disabled="true"></el-input>
											</el-col>
											<el-col :span="2">
												姓名
											</el-col>
											<el-col :span="6">
												<!--<el-input type="text" :value="emp.userName"></el-input>-->
												<el-input type="text" v-model="emp.userName"></el-input>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="2">
												性别
											</el-col>
											<el-col :span="6">
												<!--<el-input type="text" :value="emp.sex"></el-input>-->
												<el-select v-model="emp.sex" placeholder="请选择性别">
													<el-option label="男" value="1"></el-option>
													<el-option label="女" value="2"></el-option>
												</el-select>
											</el-col>
											<el-col :span="2">
												电话
											</el-col>
											<el-col :span="6">
												<el-input type="text" v-model="emp.phone"></el-input>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="2">
												入职时间
											</el-col>
											<el-col :span="6">
												<el-date-picker v-model="jobtime" type="date" placeholder="选择日期" :picker-options="pickerOptions1" format="yyyy-MM-dd"></el-date-picker>
											</el-col>
											<el-col :span="2">
												部门
											</el-col>
											<el-col :span="6">
												<template>
													<el-select v-model="departmentId" placeholder="请选择">
														<el-option v-for="opt in department" :key="opt.departmentName" :label="opt.departmentName" :value="opt.departmentName" :value="departmentId">
														</el-option>
													</el-select>
												</template>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="2">
												住址
											</el-col>
											<el-col :span="14">
												<el-input type="text" v-model="emp.address"></el-input>
											</el-col>
										</el-row>
										<el-button type="primary"  @click="editUserInfo">修改</el-button>
									</el-tab-pane>
									<el-tab-pane>
										<span slot="label"><i class="el-icon-circle-plus"></i>新增</span>
										<span class="el-span">新增</span>
										<el-form id="ruleForm" 
											:model="ruleForm" 
											:rules="rules" 
											ref="ruleForm" 
											label-width="100px" 
											class="demo-ruleForm">
											<el-form-item label="姓  名" prop="userName" >
												<el-input v-model="ruleForm.userName" placeholder="请输入姓名"></el-input>
												<span></span>
											</el-form-item>
											<el-form-item label="性  别" prop="sex">
												<el-select v-model="ruleForm.sex" placeholder="请选择性别">
													<el-option label="男" value="1"></el-option>
													<el-option label="女" value="2"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="联系电话" prop="phone">
												<el-input v-model="ruleForm.phone"placeholder="请输入联系电话"></el-input>
												<span></span>
											</el-form-item>
											<el-form-item label="入职时间">
													<el-form-item prop="jobtime">
														<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.jobtime" style="width: 100%;"></el-date-picker>
													</el-form-item>
											</el-form-item>
											<el-form-item label="入职部门" prop="departmentId">
												<el-select v-model="ruleForm.departmentId" placeholder="请选择部门">
													<el-option v-for="opt in department" :key="opt.departmentId" :label="opt.departmentName" :value="opt.departmentId" :value="departmentId">
													</el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="住址" prop="address">
												<el-input v-model="ruleForm.address" placeholder="请输入地址"></el-input>
											</el-form-item>
											<el-form-item>
												<el-button type="primary" @click="submitForm('ruleForm')">新建</el-button>
												<el-button @click="resetForm('ruleForm')">重置</el-button>
											</el-form-item>
										</el-form>
									</el-tab-pane>
								</el-tabs>
							</el-main>
						</el-container>
					</el-container>
				</el-container>
			</el-container>
		</div>
		<script type="text/javascript">
			/*加载自己写的js*/
			seajs.use("../public/js/employeeinfo.js", function(employeeinfo) {
				employeeinfo.init();
			});
		</script>
	</body>

</html>